<template>
  <q-page>
    <q-item class="justify-between items-center">
      <div class="text-h5">
        {{ 'Управление расписаниями исследований' }}
      </div>
      <q-btn color="primary"
             style="width: 300px; border-radius: 4px"
             @click="openPeriodPicker">
        Выбранный период: {{monthYear}}
      </q-btn>
    </q-item>
    <q-dialog v-model="isOpenPeriodPicker">
      <q-card class="q-pa-md"
              style="width: 700px; max-width: 80vw">
        <q-date v-model="monthYear"
                :locale="datesLocale"
                default-view="Years"
                emit-immediately
                @update:model-value="onUpdateMonthYear"
                minimal
                mask="YYYY/MM"
                class="myDate"
                ref="monthYearRef" />
        <q-btn color="primary"
               style="width: 300px; border-radius: 4px"
               @click="handleWholeYear">
          {{ 'За весь год' }}
        </q-btn>
      </q-card>
    </q-dialog>

    <q-table wrap-cells
             :pagination="false"
             ref="tableRef"
             :rows="rows"
             :columns="columns">

    </q-table>
  </q-page>
</template>

<script setup>

import { studyPlansStore } from "stores/study-plans";
import {computed, onMounted, ref, toRaw, watch} from "vue";

const studyPlans = studyPlansStore()
const monthYear = ref('2024/01')

onMounted(() => {
  studyPlans.getForecastedStudyPlansList(monthYear.value)
})

const datesLocale = {
  months: 'Январь_Февраль_Март_Апрель_Май_Июнь_Июль_Август_Сентябрь_Октябрь_Ноябрь_Декабрь'.split('_'),
  monthsShort: 'Янв_Фев_Мар_Апр_Май_Июн_Июл_Авг_Сен_Окт_Ноя_Дек'.split('_'),
  firstDayOfWeek: 1, // 0-6, 0 - Sunday, 1 Monday, ...
}
const onUpdateMonthYear = (val) => {
  if (currentView.value === 'Years') {
    currentView.value = 'Month'
  } else {
    currentView.value = 'Years'
    isOpenPeriodPicker.value = false
    studyPlans.getForecastedStudyPlansList(monthYear.value)
  }
}

const monthYearRef = ref(null)
const currentView = ref('Years')

const isOpenPeriodPicker = ref(false)
const openPeriodPicker = () => {
  isOpenPeriodPicker.value = true;
}

const handleWholeYear = () => {
  monthYear.value = monthYear.value.split('/')[0]
  isOpenPeriodPicker.value = false
  studyPlans.getForecastedStudyPlansList(monthYear.value)
}

const rows = computed(() => {
  return studyPlans.getStudyPlansRows
})

const columns = computed(() => {
  return studyPlans.getStudyPlansColumns
})

</script>

<style scoped lang="scss">

</style>
